<script setup lang="ts">
import {ref, computed} from 'vue'
import {getUserDetail} from "@/apps/admin/api/user/user";
import {DetailPanelHeaders, DetailPanelPages} from "@/components/DetailPanel/type";
import UserData from "./UserData.vue";

const emit = defineEmits<{
  (e: 'close'): void
}>()

const show = ref<boolean>(false)

/**
 * 详情数据
 */
const detail = ref<any>({})


/**
 * 打开组件
 * @param id
 */
function open(id: number) {
  getUserDetail(id).then((res) => {
    if (res.code === 200) {
      show.value = true
      detail.value = res.data
    } else {
      close()
    }
  })
}

/**
 * 关闭
 */
function close() {
  show.value = false
  detail.value = {}
  emit('close')
}


//头部信息
const headers = computed<DetailPanelHeaders[]>(() => {
  if (detail.value?.user?.id) {
    return [
      {value: detail.value?.user?.nickname, label: "用户名称"},
      {value: detail.value?.user?.mobile, label: "手机号码"},
      {value: detail.value?.user?.created_at, label: "注册时间"},
      {value: detail.value?.user?._sex, label: "性别"},
      {value: detail.value?.user?.last_login, label: "上次登录"},
    ]
  } else {
    return []
  }
})


//选项卡
const pages = ref<DetailPanelPages[]>([
  {label: '基础信息', key: 'user'}
])

defineExpose({open, close})
</script>

<template>
  <detail-panel
      :headers
      :pages
      title="会员详情"
      v-model="show"
      @closed="close"
  >
    <template #user>
      <user-data @reload="open(detail?.user?.id)" :data="detail?.user"></user-data>
    </template>
  </detail-panel>
</template>